<template>
  <a-card size="small" style="margin-bottom: 10px" :bordered="false">
    <a-flex justify="space-between" align="center">
      <a-flex>
        <span style="font-weight: bold">主站状态：</span>
        <a-tag :color="masterStatus.isConnected?'green':'red'">{{ masterStatus.isConnected ? '已连接' : '断开' }}
        </a-tag>
        <span style="margin-left: 15px;font-weight: bold">最近采集时间：{{ masterStatus.lastTime }}</span>
      </a-flex>
      <a-button type="primary" ghost @click="loadData">刷新</a-button>
    </a-flex>
  </a-card>
  <a-tabs v-model:activeKey="activeKey" tab-position="left" type="card" size="large">
    <a-tab-pane :key="key" :tab="`从站-【${key}】`" v-for="(data,key,index) in registerData">
      <a-card size="small" style="margin-bottom: 10px" :bordered="false">
        <a-radio-group v-model:value="tab">
          <a-radio-button value="keep">保持寄存器-[03]</a-radio-button>
          <a-radio-button value="input">输入寄存器-[04]</a-radio-button>
        </a-radio-group>
      </a-card>
      <a-table :columns="columns" :dataSource="[...(data?data.filter(x=>x.registerType==tab):[])]" :pagination="false"
               :scroll="{ y: yScroll }" :rowClassName="setRowClassName"></a-table>
    </a-tab-pane>
  </a-tabs>

</template>
<script setup>

import {ref} from "vue";
import {baseRequest} from "@/utils/request.js";

const tab = ref('keep')
const activeKey = ref(null)
const masterStatus = ref({})
const registerData = ref([])
const yScroll = `calc(100vh - ${300}px)`
const columns = [
  {
    title: '测点名称',
    dataIndex: 'name',
  },
  {
    title: '寄存器地址',
    dataIndex: 'address',
  },
  // {
  //   title:'地址偏移量',
  //   dataIndex:'offset',
  // },
  {
    title: '数据类型',
    dataIndex: 'dataType',
  },
  // {
  //   title:'倍率',
  //   dataIndex:'m',
  // },
  {
    title: 'modbus十进制',
    dataIndex: 'realValue'
  },
  {
    title: '倍率计算结果',
    dataIndex: 'mvalue'
  },
  {
    title: '单位',
    dataIndex: 'unit',
  },
  {
    title: '104寄存器地址',
    dataIndex: 'address104',
  }
]
const setRowClassName = (record, index) => {
  if (record.address104 != null) {
    return 'forward'
  }
}
const loadData = () => {
  baseRequest("/modbus/status", {}).then(res => {
    masterStatus.value = res.data.data
  })

  baseRequest("/rule_value", {}).then(res => {
    registerData.value = res.data.data
    activeKey.value = registerData.value[0]
  })
}
loadData()

</script>

<style scoped>
/deep/ .forward {
  background-color: #e0eae0 !important;
}
</style>
